<template>
  <template v-if="loading">
    <!-- loading 界面，可以使用第三方库如 ElementUI 的 Loading 组件 -->
    <a-spin dot />
  </template>
  <div id="personal" v-else>
    <div class="self-info center">
      <!-- sidebar -->
      <div class="lfnav fl">
        <div class="nav_title">个人中心</div>
        <div class="title_list">
          <ul>
            <li> <router-link to="/mall/personal">个人信息</router-link></li>

            <li><router-link to="/mall/myorder" class="active">我的订单</router-link></li>

            <li> <router-link to="/body" @click="logout">退出登录</router-link></li>
          </ul>
        </div>
      </div>

      <div class="intro fr" style="height: 700px;">
        <!-- 订单无商品时 -->
        <div class="uc-box uc-main-box" v-if="1 == 0">
          <div class="uc-content-box order-list-box">
            <div class="box-hd">
              <h1 class="title">我的订单
                <small>请谨防钓鱼链接或诈骗电话，<a href="##">了解更多&gt;</a>
                </small>
              </h1>
            </div>
            <div class="box-bd">
              <div id="J_orderList">
                <ul class="order-list">

                  <img style="margin-top: 16px;" src="http://localhost:28089/mall/image/null-content.png">
                  <small><router-link to="/body">&nbsp;&nbsp;&nbsp;&nbsp;去购物&gt;</router-link>
                  </small>

                </ul>
              </div>
            </div>

          </div>
        </div>
        <!-- 订单有商品时 -->
        <div class="uc-box uc-main-box" v-if="1 == 1">
          <div class="uc-content-box order-list-box" style="top: -20px;">
            <div class="box-hd">
              <h1 class="title">我的订单
                <small>请谨防钓鱼链接或诈骗电话，<a href="##">了解更多&gt;</a>
                </small>
              </h1>
            </div>
            <div class="box-bd">
              <div id="J_orderList">
                <ul class="order-list infinite-list" style="overflow: auto;height: 600px;">
                  <li class="uc-order-item uc-order-item-list" v-for="(group, orderNumber) in  groupedProducts "
                    :key="orderNumber">
                    <div class="order-detail" style="height: fit-content;">
                      <div class="order-summary">
                        <div class="order-status-success" v-if="group[0].orderStatus > 1">
                          已支付
                        </div>
                        <div class="order-status-need-pay" v-if="group[0].orderStatus == 1">
                          未支付
                        </div>
                        <div class="order-status-closed" v-if="group[0].orderStatus < 0">
                          订单取消
                        </div>
                      </div>
                      <table class="order-detail-table">
                        <thead>
                          <tr>
                            <th class="col-main">
                              <p class="caption-info">{{ group[0].createTime }}</p>
                            </th>
                            <th class="col-sub">
                              <p class="caption-price">应付金额：<span class="num">{{ group[0].totalPrice

                              }}</span>元
                              </p>
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="order-items">
                              <ul class="goods-list" v-for=" product  in  group " :key="product.id">
                                <li style="height: auto;">
                                  <div class="figure figure-thumb">
                                    <a target="_blank">
                                      <img :src="product.goodsCoverImg" alt="">
                                    </a>
                                  </div>
                                  <p class="name"><a target="_blank">{{ product.goodsName }}</a>
                                  </p>
                                  <p class="price">{{ product.sellingPrice }} 元 x {{ product.goodsCount }}</p>
                                </li>
                              </ul>
                            </td>
                            <td class="order-actions">
                              <a @click="show(group[0].orderId)" class=" btn btn-small
                              btn-line-gray">订单详情</a>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" style="width: 976px;top: -60px;">
    <div class="uc-box uc-main-box">
      <div class="uc-content-box order-view-box " style="top: -80px;">
        <div class="box-hd">
          <h1 class="title" style="left: -50px;">订单详情
            <small>请谨防钓鱼链接或诈骗电话，<a href="##">了解更多&gt;</a>
            </small>
          </h1>
          <div class="more clearfix" style="top: 20px;">
            <h2 class="subtitle">订单号：
              {{ user.orderDetail[0].orderNo }}
              <span class="tag tag-subsidy"></span>
            </h2>
            <div class="actions" v-if="user.orderDetail[0].orderStatus == 2">
              <a @click="cancelOrder(user.orderDetail[0].orderNo)" class="btn btn-small btn-line-gray"
                title="取消订单">取消订单</a>
            </div>
            <div class="actions" v-if="user.orderDetail[0].orderStatus == 1">
              <a @click="pay(user.orderDetail[0].orderNo)" class="btn btn-small btn-line-gray" title="去支付">去支付</a>
            </div>
          </div>
        </div>
        <div class="box-bd">
          <div class="uc-order-item uc-order-item-pay">
            <div class="order-detail">

              <div class="order-summary">
                <div v-if="user.orderDetail[0].orderStatus == 2">
                  <div class="order-status">已支付</div>
                  <div class="order-desc">
                    只因商城订单确认中~
                  </div>
                </div>
                <div v-if="user.orderDetail[0].orderStatus == 1">
                  <div class="order-status">未支付</div>
                  <div class="order-desc">
                    还未支付~
                  </div>
                </div>
                <div v-if="user.orderDetail[0].orderStatus == 3">
                  <div class="order-status">正在紧急配货中</div>

                </div>
                <div v-if="user.orderDetail[0].orderStatus == 4">
                  <div class="order-status">订单已出库，正在向您奔来~~</div>

                </div>
                <div v-if="user.orderDetail[0].orderStatus == 5">
                  <div class="order-status">交易成功，感谢支持与信任！</div>
                </div>
                <div v-if="user.orderDetail[0].orderStatus < 0">
                  <div class="order-status">交易关闭</div>
                </div>
                <div class="order-progress" v-if="user.orderDetail[0].orderStatus > 0">
                  <el-steps :active="user.orderDetail[0].orderStatus" finish-status="success" simple
                    style="margin-top: 20px">
                    <el-step title="下单" />
                    <el-step title="付款" />
                    <el-step title="配货" />
                    <el-step title="出库" />
                    <el-step title="交易成功" />
                  </el-steps>
                </div>
                <div class="order-progress" v-if="user.orderDetail[0].orderStatus < 0">
                  <div class="order-status">交易关闭</div>
                </div>
              </div>
              <table class="order-items-table">
                <tbody>
                  <tr v-for="  item   in   user.orderDetail  " :key="index">
                    <td class="col col-thumb">
                      <div class="figure figure-thumb">
                        <a target="_blank">
                          <img :src="item.goodsCoverImg" width="80" height="80" alt="">
                        </a>
                      </div>
                    </td>
                    <td class="col col-name">
                      <p class="name">
                        <a target="_blank">{{ item.goodsName }}</a>
                      </p>
                    </td>
                    <td class="col col-price">
                      <p class="price">{{ item.sellingPrice }}元 x {{ item.goodsCount }}</p>
                    </td>
                    <td class="col col-actions">
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div id="editAddr" class="order-detail-info">
              <h3>收货信息</h3>
              <table class="info-table">
                <tbody>
                  <tr>
                    <td>{{ user.orderDetail[0].userAddress }}</td>
                  </tr>
                </tbody>
              </table>
              <div class="actions">
              </div>
            </div>
            <div id="editTime" class="order-detail-info">
              <h3>支付方式</h3>
              <table class="info-table">
                <tbody>
                  <tr>
                    <th>支付方式：</th>
                    <td>支付宝</td>
                  </tr>
                </tbody>
              </table>
              <div class="actions">
              </div>
            </div>
            <div class="order-detail-total">
              <table class="total-table">
                <tbody>
                  <tr>
                    <th>运费：</th>
                    <td><span class="num">0</span>元</td>
                  </tr>
                  <tr>
                    <th class="total">商品总价：</th>
                    <td class="total"><span class="num">{{ totalPrice
                    }}.00</span>元
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import '../../assets/mall/styles/my-orders.css'
import '../../assets/mall/styles/order-detail.css'
import Store from '../../stores/Store.js'
import axios from 'axios'
export default {
  data() {
    return {
      user: Store(),
      count: 0,
      dialogTableVisible: false,
      totalPrice: 0,
      loading: true,
    }
  },
  created() {
    axios.post('http://localhost:8080/goods//searchOrderItem/' + this.user.userInfo.userId).then(resp => {
      this.loading = false
      this.user.orderItem = resp.data
    })
  }
  , methods: {
    logout() {
      this.user.token = 0
      this.user.cartNumber = 0
      sessionStorage.setItem("isLogin", false);
      this.$router.push('/login')
    },
    show(orderId) {
      this.dialogTableVisible = true
      console.log(orderId);
      axios.post('http://localhost:8080/order//searchOrderDetail/' + orderId).then(resp => {
        this.user.orderDetail = resp.data
        this.totalPrice = resp.data[0].totalPrice
        console.log(resp.data);
      })

    },
    pay(id) {
      axios.post('http://localhost:8080/order/findOrderMoney/' + id).then(resp => {

        window.open('http://localhost:8080/alipay/pay?subject=只因订单&traceNo=' + id + '&totalAmount=' + resp.data)
      })

    },
    cancelOrder(id) {
      axios.post('http://localhost:8080/order/deleOrder/' + id + "/" + this.user.userInfo.userId).then(resp => {
        this.user.orderItem = resp.data
        this.dialogTableVisible = false

      })
    }
  },
  computed: {
    groupedProducts() {
      const groups = {};
      this.user.orderItem.forEach(product => {
        if (!groups[product.orderId]) {
          groups[product.orderId] = [];
        }
        groups[product.orderId].push(product);
      });
      return groups;
    },

  },
}


</script>

<style scoped>
.infinite-list {
  height: 400px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}
</style>